<template>
	<div class="app-search" id="list">
		<CardFrame
			:appList="innerApplist"
			:isSearch="true"
			v-if="innerApplist?.length > 0"
			:searchKeyWord="searchKeyWord"
			:isLoadingIndex="isLoadingIndex"
			@loadAll="loadAll"
		/>
		<van-loading v-if="searching" size="15" style="left: 50%" />
		<div class="app-search-no-more" v-if="!searching && !SearchList">
			<img src="./images/app_search_no_more.svg" />
			<p>{{ $t('pages.application.NoRelatedApp', '未找到相关应用') }}</p>
		</div>
	</div>
</template>
<script setup lang="ts">
import CardFrame from '../../components/CardFrame/index.vue'
import { ref, watch } from 'vue'
import { apiInit } from '@/services'
import { showFailToast } from 'vant'
// import { t } from '@/entry_mobile/locales'
import { i18n } from '@/locales'
const { $t } = i18n
import { isMoreTabs } from '@/utils/common'
const api = apiInit()
const props = defineProps({
	SearchList: {
		type: Array,
		default: [],
	},
	searching: {
		type: Boolean,
		default: false,
	},
	searchKeyWord: {
		type: String,
		default: '',
	},
})
const isLoadingIndex = ref(-1)
const innerApplist: any = ref([])

const loadAll = async (groupId: string, index: number) => {
	isLoadingIndex.value = index
	let res = await api.default.ListAppPrivateV2POST({
		payload: {
			group_id: groupId,
			keyword: '',
			enable_multiple_tab: isMoreTabs(),
		},
	})
	if (res.code === '000000') {
		innerApplist.value[index] = (res.data as any)[0]
	} else {
		showFailToast('接口出错了')
	}
	isLoadingIndex.value = -1
}
watch(
	() => props.SearchList,
	(newVal: any) => {
		innerApplist.value = newVal
	}
)
</script>
<style lang="less" scoped>
.app-search {
	height: 100%;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		display: none;
	}
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	.app-search-no-more {
		display: flex;
		flex-direction: column;
		align-items: center;
		p {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			text-align: center;
			color: #8f959e;
			margin-top: -30px;
		}
	}
}
</style>
